<script setup lang="ts">
defineOptions({
  name: "loadRateItem"
});
import { ref, reactive, onMounted, computed, markRaw } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import ICON from "@/assets/svg/common/echarts.svg?component";
import loadRateDetail from "./loadRateDetail.vue";

interface Props {
  data?: any | null;
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), { dark: false });

const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);
const options = ref<CommonEcharts.CommonEchartsOption | null>(null);
const isShowDetail = ref<boolean>(false);
const mainKey = ref<string>("");
const dailogTitle = ref("");

const updateEchartsOption = () => {
  echartsComRef.value.updateOption();
};
const showDetailHandler = async (item: any) => {
  mainKey.value = item.mainKey;
  dailogTitle.value = `${item.loadName}负载率`;
  // detailData.value = null;
  // const { mainKey: mainKey_ = "", mainName = "", type: type_ = "" } = item;
  // if (!mainKey_ || !type.value) return;
  // mainKey.value = mainKey_;
  isShowDetail.value = true;
};
defineExpose({
  updateEchartsOption
});
onMounted(() => {});
</script>

<template>
  <echartsCom ref="echartsComRef" :options="data.options" :dark="dark" />
  <div v-if="!dark && echartsComRef?.isShowEcharts" class="expecial">
    <component :is="markRaw(ICON)" class="status-text-icon" @click="showDetailHandler(data)" />
  </div>
  <loadRateDetail v-if="isShowDetail" v-model="isShowDetail" :title="dailogTitle" :mainKey="mainKey" />
</template>

<style lang="scss" scoped>
.expecial {
  position: absolute;
  top: 83%;
  right: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--px-color-primary);

  .status-text-icon {
    width: 14px;
    height: 14px;
    color: var(--px-color-primary);

    &:hover {
      color: var(--px-color-primary-light-3);
      cursor: pointer;
    }
  }
}
</style>
